<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="card">
    <div class="card-header">
        <h4 class="mb-0">${question.title}</h4>
    </div>
    <div class="card-body">
        <div class="mb-4">
            <div class="d-flex justify-content-between">
                <span class="badge bg-primary">${question.categoryName}</span>
                <span class="badge ${question.difficulty == 1 ? 'bg-success' : question.difficulty == 2 ? 'bg-warning' : 'bg-danger'}">
                    ${question.difficulty == 1 ? '简单' : question.difficulty == 2 ? '中等' : '困难'}
                </span>
            </div>
        </div>
        <div class="mb-4">
            <p class="card-text">${question.content}</p>
        </div>
        <form id="answerForm">
            <input type="hidden" id="questionId" value="${question.id}">
            <div class="mb-3">
                <c:forEach items="A,B,C,D" var="option">
                    <div class="form-check">
                        <input class="form-check-input" type="${question.isMultiple ? 'checkbox' : 'radio'}" 
                               name="answer" id="option${option}" value="${option}">
                        <label class="form-check-label" for="option${option}">
                            ${option}. ${question['option'.concat(option)]}
                        </label>
                    </div>
                </c:forEach>
            </div>
            <c:if test="${question.isMultiple}">
                <div class="text-muted mb-3">（多选题：请选择所有正确答案）</div>
            </c:if>
            <button type="submit" class="btn btn-primary">提交答案</button>
            <a href="${pageContext.request.contextPath}/question/list" class="btn btn-secondary">返回列表</a>
        </form>
    </div>
</div>

<!-- 答题结果模态框 -->
<div class="modal fade" id="resultModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">答题结果</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="resultCorrect" class="alert alert-success d-none">
                    <h4>回答正确！</h4>
                    <p>继续加油！</p>
                </div>
                <div id="resultWrong" class="alert alert-danger d-none">
                    <h4>回答错误</h4>
                    <p>正确答案是：<span id="correctAnswer"></span></p>
                    <p>不要灰心，继续努力！</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <a href="${pageContext.request.contextPath}/question/list" class="btn btn-primary">继续答题</a>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    let resultModal = new bootstrap.Modal(document.getElementById('resultModal'));

    $('#answerForm').on('submit', function(e) {
        e.preventDefault();

        let answers;
        if (${question.isMultiple}) {
            answers = $('input[name="answer"]:checked').map(function() {
                return $(this).val();
            }).get().sort().join(',');
            if (!answers) {
                alert('请至少选择一个答案');
                return;
            }
        } else {
            answers = $('input[name="answer"]:checked').val();
            if (!answers) {
                alert('请选择一个答案');
                return;
            }
        }

        $.ajax({
            url: '${pageContext.request.contextPath}/question/api/submit',
            type: 'POST',
            data: {
                questionId: $('#questionId').val(),
                answer: answers,
                isMultiple: ${question.isMultiple}
            },
            success: function(response) {
                if (response.code === 200) {
                    let data = response.data;
                    $('#resultCorrect').toggleClass('d-none', !data.correct);
                    $('#resultWrong').toggleClass('d-none', data.correct);
                    if (!data.correct) {
                        $('#correctAnswer').text(data.correctAnswer);
                    }
                    resultModal.show();

                    // 禁用提交按钮和选项
                    $('#answerForm button[type="submit"]').prop('disabled', true);
                    $('input[name="answer"]').prop('disabled', true);

                    // 显示正确答案
                    $('input[name="answer"]').each(function() {
                        let $parent = $(this).closest('.form-check');
                        let currentOption = $(this).val();
                        
                        // 判断当前选项是否是正确答案
                        let isCorrectOption = ${question.isMultiple} ? 
                            data.correctAnswer.includes(currentOption) :
                            data.correctAnswer === currentOption;
                            
                        // 如果是正确答案，显示绿色
                        if (isCorrectOption) {
                            $parent.addClass('correct-answer');
                        }
                        
                        // 如果当前选项被选中且不是正确答案，显示红色
                        if ($(this).prop('checked') && !isCorrectOption) {
                            $parent.addClass('wrong-answer');
                        }
                    });
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 401) {
                    alert('请先登录');
                    window.location.href = '${pageContext.request.contextPath}/user/login';
                } else {
                    alert('提交失败，请稍后重试');
                }
            }
        });
    });
});
</script>

<style>
.correct-answer {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
}
.wrong-answer {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}
.form-check {
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
</style>
